<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
		<link rel="stylesheet" type="text/css" href="css/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="css/shopcart.css" />
		<link rel="stylesheet" type="text/css" href="css/header.css" />
		<link rel="stylesheet" type="text/css" href="css/header1.css" />
		<title></title>
	</head>
	<body>
		<div id="app" style="display: flex;display: -webkit-flex;min-height: 100vh;flex-direction: column;">
			<div class="container-fluid">
				<div id="tubiao">
					<img src="img/M.png" />
				</div>
				<div id="xx">
					<h4><a href="index.html">首页</a></h4>
					<h5>
						<a href="tab.html"><i class="iconfont icon-shouye1"></i></a>
						<a href="shopcart.html"><i class="iconfont icon-shouye2"></i></a>
					</h5>
				</div>
			</div>
			<section id="cart_goods" class="container" style="flex: 1;">
				<div class="cart_nav">
					<h2>购物清单</h2>
				</div>
				<my-cart></my-cart>
			</section>
			<section id="about">
				<div class="about_menu w-75 m-auto">
					<ul>
						<li>
							<h3>订单服务</h3>
							<div class="item-name">
								<a href="#">购买指南</a>
								<a href="#">送货政策</a>
							</div>
						</li>
						<li>
							<h3>服务支持</h3>
							<div class="item-name">
								<a href="#">零售门店</a>
								<a href="#">自助服务</a>
								<a href="#">维修门店</a>
							</div>
						</li>
						<li>
							<h3>媒体中心</h3>
							<div class="item-name">
								<a href="#">新闻动态</a>
								<a href="#">官方视频</a>
								<a href="#">图片资源</a>
							</div>
						</li>
						<li>
							<h3>关注我们</h3>
							<div class="item-name">
								<a href="#">新浪微博</a>
								<a href="#">官方微信</a>
								<a href="#">荣誉奖项</a>
							</div>
						</li>
					</ul>
					<div class="about_phone">
						<h1>400 - 603 - 5000</h1>
						<h2>周一到周日 9:00 - 18:00</h2>
						<h2>(仅收市话费)</h2>
						<div class="online">
							<a href="#">
								<i class="iconfont icon-0-02"></i>
								<span>在线帮助</span>
							</a>

						</div>
					</div>
				</div>
				<div class="about_info w-75 m-auto">
					<ul>
						<li style="border-left: #FFFFFF solid 1px;">Copyright C 2020 smartisan.com版权所有</li>
						<li>锤子商城隐私政策</li>
						<li>锤子商城用户协议</li>
						<li>资质证照</li>
					</ul>
					<ul>
						<li style="border-left: #FFFFFF solid 1px;">京ICP 备 19048576号-1</li>
						<li><i class="iconfont icon-0-12"></i>京公网安备11010502039854号</li>
						<li>京食药网食备202010031</li>
					</ul>
				</div>
			</section>

		</div>
		<script src="js/jquery3.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/axios.js" type="text/javascript" charset="utf-8"></script>
		<template id="goodslist_infos">
			<div style="display: flex;">
				<li class="nav-item" v-for='a in goodslist.slice(0,4)'>
					<div class="nav_rim">
						<a class="nav-link" href="#">{{a.cat_name}}</a>
						<div class="show_rim">
							<div class="container">
								<ul class="rim_info">
									<li class="costume" v-for='bb in a.children.slice(0,4)'>
										<h4>{{bb.cat_name}}</h4>
										<ul>
											<li v-for='ccc in bb.children' @click="xxx(ccc.cat_id)">
												<img :src="ccc.cat_icon" />
												<h5>{{ccc.cat_name}}</h5>

											</li>
										</ul>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</li>
			</div>
		</template>

		<script type="text/javascript">
			Vue.component('my-short', {
				data: function() {

					return {
						goodslist: []
					}
				},
				template: "#goodslist_infos",
				methods: {
					xxx: function(val) {
						var url = "goods.html?cid=" + val;
						console.log(url);
						window.location.href = url
					}
				},
				created: function() {
					axios.get('http://localhost:8080/mall/categories').then(function(ret) {
						this.goodslist = ret.data.message;
						console.log(this.goodslist)
					}.bind(this));

				}
			});

			var CartList = {
				props: ['list'],
				template: `
			    <div>
			      <div class="item row"  v-for='item in list' :key='item.cart_id'>
				  <div class="col-7 car-goods-info">				 			  
				  <div class="img"><img :src="item.goods_small_logo"/></div>
				  <div class="name">{{item.goods_name.slice(0,18)}}...</div>
				  </div>
			        <div class="a_price col-1">￥{{item.goods_price}}</div>					
			        <div class="change col-1">
			          <a href="" @click.prevent='subNum(item.cart_id,-1)'><i class="iconfont icon-shrink-s"></i></a>
			          <div><input type="text" :value='item.num' class="num" @blur='changeNum(item.goods_id,$event)'/></div>
			          <a href="" @click.prevent='addNum(item.cart_id,1)'><i class="iconfont icon-unfolded-s"></i></a>
			        </div>
					<div class="allprice col-1">￥<span>{{item.goods_price*item.num}}</span></div>
			        <div class="del col-2" @click='deleteCart(item.cart_id)'><i class="iconfont icon-cross"></i></div>
			      </div>
			    </div>
			  `,
				methods: {
					deleteCart: function(id) {
						this.$emit('delete-cart', id);
						console.log(id)
						axios.get('http://localhost:8080/mall/goods/deleteCartGoods', {
							params: {
								cart_id: id,

							}
						}).then(function(ret) {
							if (ret.status == 200) {
								alert("删除成功!")
								console.log("xxxxxxxxxxxxxx")
							}
						})
					},
					changeNum: function(id, event) {
						// console.log(id, event.target.value);
						this.$emit('change-num', {
							id: id,
							num: event.target.value,
							type: 'change'
						});
					},
					subNum: function(id, val) {
						// console.log(val)
						this.$emit('change-num', {
							id: id,
							type: 'sub'
						});
					},
					addNum: function(id, val) {
						// console.log(val)
						this.$emit('change-num', {
							id: id,
							type: 'add'
						});
					}
				}
			};
			var CartTotal = {
				props: ['list', 'orderDetail', 'orders'],
				template: `
			    <div class="total">
				<button @click="playcat()">结算</button>
				<span class="smoney">应付总额：￥<i>{{total}}</i></span>
				<span class="snum">共计 <i>{{totalnum}}</i> 件商品</span>		      
			    </div>
			  `,
				computed: {
					totalnum: function() {
						var n = 0;
						this.list.forEach(item => {
							n += item.num;
						})
						// console.log(n)
						return n;
					},
					total: function() {
						var t = 0;
						this.list.forEach(item => {
							t += item.goods_price * item.num;
						})
						// console.log(t)
						return t;
					}
				},
				methods: {
					playcat: function() {
						this.createOrderCode();
						this.list.forEach(item => {
							//把购物车数据作为订单详情信息
							this.orderDetail.item_id = item.goods_id;
							// this.orderDetail.order_code
							this.orderDetail.item_num = item.num;
							this.orderDetail.item_title = item.goods_name;
							this.orderDetail.item_price = item.goods_price;
							this.orderDetail.total = item.num * item.goods_price;
							this.orderDetail.item_image = item.goods_small_logo;

							// 生成订单详情数据
							const res1 = axios.get('http://localhost:8080/mall/order/createOrderDetail', {
								params: {
									item_id: this.orderDetail.item_id,
									order_code:this.orderDetail.order_code,									
									item_num: this.orderDetail.item_num ,
									item_title: this.orderDetail.item_title,
									item_price: this.orderDetail.item_price,
									total: this.orderDetail.total,
									item_image: this.orderDetail.item_image
								}
							}).then(function(ret) {
								if (ret.status == 200) {
									console.log("结算成功");
								}
							});
						
							//生成订单信息
							this.orders.payment_money = this.total;
							console.log(this.orders.payment_money);
							const res2 = axios.get('http://localhost:8080/mall/order/createOrder', {
								params: {
									order_code:this.orders.order_code,		
									payment_money:this.orders.payment_money,
									status: 2
								}
							}).then(function(ret) {
								if (ret.status == 200) {
									console.log("结算成功!!");
								}
							});		
												
							console.log(item.goods_id)					
							this.deleteCart(item.goods_id);	
															
						})
						var url1 = "info.html?order_code="+this.orders.order_code;
						window.location.href= url1;	
					},
					deleteCart: function(id) {
						this.$emit('delete-cart', id);
						console.log(id)
						axios.get('http://localhost:8080/mall/goods/deleteCartGoods1', {
							params: {
							goods_id: id,					
							}
						}).then(function(ret) {
							if (ret.status == 200) {
								console.log("成功清除")
							}
						})
					},
					createOrderCode() {
						let random_no = "";
						for (let i = 0; i < 3; i++) //j位随机数，用以加在时间戳后面。
						{
							random_no += Math.floor(Math.random() * 10);
						}
						random_no = new Date().getTime() + random_no;
						this.orderDetail.order_code = random_no;
						this.orders.order_code = random_no;
					}
				}
			}
			Vue.component('my-cart', {
				data: function() {
					return {
						list: [],
						isfull: true,
						isnull: false,
						orderDetail: {
							item_id: 0,
							order_code: "",
							item_num: 0,
							item_title: "",
							item_price: 0,
							total: 0,
							item_image: ""
						},
						orders: {
							order_code: "",
							payment_money: 0,
							status: 2
						}

					}
				},
				created: function() {
					axios.get('http://localhost:8080/mall/goods/showCart').then(function(ret) {
						this.list = ret.data.message.message;
						console.log(this.list)
					}.bind(this));

					console.log(this.list.length)
					if (this.list.length < 0) {
						this.isfull = false;
						this.isnull = true;
					}
				},
				template: `
			    <div class='cart'>
					<div class="full_shopcart" v-show="isfull">
						<div class="full_nav">
							<div class="row">
								<div class="col-md-7 car-menu" style="text-align: left; "><span style="margin-left: 50px;">商品信息</span></div>
								<div class="col-md-1 car-menu">单价</div>
								<div class="col-md-1 car-menu">数量</div>
								<div class="col-md-1 car-menu" style="text-align: center;">金额</div>
								<div class="col-md-2 car-menu" style="text-align: center;">操作</div>
							</div>
						</div>
						<div class="shopping_info">
							<cart-list :list='list' @delete-cart='deleteCart($event)' @change-num='changeNum($event)'></cart-list>
							<cart-total :list='list' :orderDetail='orderDetail' :orders='orders' @delete-cart='deleteCart($event)'></cart-total>
						</div>
					</div>
					<div class="null_shopcart" v-show="isnull">
						<div class="img">
							<img src="./img/cart-empty_@2x.png" >
						</div>
						<p>你的购物车空空如也</p>
						<div class="toshop">
							<a href="#">
								<input type="button" value="现在选购" />
							</a>
						</div>
					</div>
			      
			    </div>
			  `,
				components: {
					'cart-list': CartList,
					'cart-total': CartTotal
				},
				methods: {
					changeNum: function(v) {
						if (v.type == 'change') {
							// 改变商品数量
							this.list.some(item => {
								if (item.cart_id == v.id) {
									item.num = parseInt(v.num);
									axios.get('http://localhost:8080/mall/goods/addCartNum', {
										params: {
											cart_id: v.id,
											num: item.num
										}
									}).then(function(ret) {
										if (ret.status == 200) {
											// alert("删除成功!")
											console.log("xxxxxxxxxxxxxx")
										}
									});

									return true;
								}
							})
						} else if (v.type == 'sub') {
							this.list.some(item => {
								if (item.cart_id == v.id) {
									item.num -= 1;
									axios.get('http://localhost:8080/mall/goods/addCartNum', {
										params: {
											cart_id: item.cart_id,
											num: item.num
										}
									}).then(function(ret) {
										if (ret.status == 200) {
											// alert("删除成功!")
											console.log("xxxxxxxxxxxxxx")
										}
									});
									return true;
								}
							})
						} else if (v.type == 'add') {
							this.list.some(item => {
								if (item.cart_id == v.id) {
									item.num += 1;
									console.log(item.num);
									axios.get('http://localhost:8080/mall/goods/addCartNum', {
										params: {
											cart_id: item.cart_id,
											num: item.num
										}
									}).then(function(ret) {
										if (ret.status == 200) {
											// alert("删除成功!")
											console.log("xxxxxxxxxxxxxx")
										}
									});
									return true;
								}
							})
						}
					},
					deleteCart: function(v) {
						var index = this.list.findIndex(item => {
							return item.cart_id == v;
						});
						this.list.splice(index, 1);
					}

				}
			});
			var vm = new Vue({
				el: '#app',
				data: {

				}
			});
		</script>
	</body>
</html>
